<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>点击变换颜色</title>
</head>
<style>
    #div01 {
        width: 100%;
        height: 600px;
        border: 1px solid;
    }
    
    #div0101 {
        width: 20%;
        height: 600px;
        border: 1px solid;
        float: left
    }
    
    #div0102 {
        width: 79%;
        height: 600px;
        border: 1px solid;
        background-color: forestgreen;
        float: left;
        display: block;
        /*显示*/
    }
    
    #div0103 {
        width: 79%;
        height: 600px;
        border: 1px solid;
        background-color: yellowgreen;
        float: left;
        display: none;
        /*隐藏*/
    }
    
    #div0104 {
        width: 79%;
        height: 600px;
        border: 1px solid;
        background-color: peru;
        float: left;
        display: none;
        /*隐藏*/
    }
    
    #div0105 {
        width: 79%;
        height: 600px;
        border: 1px solid;
        background-color: brown;
        float: left;
        /*靠左*/
        display: none;
        /*隐藏*/
    }
</style>

<body>
    <div id="div01">
        <!--左边div-->
        <div id="div0101">
            <input type="button" value="火影忍者" onclick="ones()" />
            <br>
            <input type="button" value="海贼王" onclick="twos()" />
            <br>
            <input type="button" value="名侦探柯南" onclick="threes()" />
            <br>
            <input type="button" value="一拳超人" onclick="fourths()" />
            <br>
        </div>
        <!--右边1div-->
        <div id="div0102"></div>
        <!--右边2div-->
        <div id="div0103"></div>
        <!--右边3div-->
        <div id="div0104"></div>
        <!--右边4div-->
        <div id="div0105"></div>
    </div>
</body>

</html>
<script type="text/javascript">
    function ones() {
        //显示
        document.getElementById("div0102").style.display = "block";
        //隐藏
        document.getElementById("div0103").style.display = "none";
        document.getElementById("div0104").style.display = "none";
        document.getElementById("div0105").style.display = "none";
    }

    function twos() {
        //显示
        document.getElementById("div0103").style.display = "block";
        //隐藏
        document.getElementById("div0102").style.display = "none";
        document.getElementById("div0105").style.display = "none";
        document.getElementById("div0104").style.display = "none";
    }

    function threes() {
        //显示
        document.getElementById("div0104").style.display = "block";
        //隐藏
        document.getElementById("div0102").style.display = "none";
        document.getElementById("div0105").style.display = "none";
        document.getElementById("div0103").style.display = "none";
    }

    function fourths() {
        //显示
        document.getElementById("div0105").style.display = "block";
        //隐藏
        document.getElementById("div0104").style.display = "none";
        document.getElementById("div0103").style.display = "none";
        document.getElementById("div0102").style.display = "none";
    }
</script>